<template>
<div class="com-container">
	<div class="com-chart" ref="sellerRef" id="sellerRef" @mouseover="mousover" @mouseout="mousout"></div>
</div>
</template>
<script lang='ts' setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue';

import * as echarts from 'echarts'
import '../../public/theme/chalk'
import {getseller} from '../api/api'
import socketService from '../api/socket_sever'
import { useStore } from 'vuex';
const store = useStore()
  const sellerRef = ref()
	const state = reactive<{
    // myChart: echarts.ECharts | null,
    data: API.sellerlistRes[]
    currentPage: number
    totalPage: number
    setinter: number
	}>({
    // myChart: null,
    data: [],// 服务器返回数据
    currentPage: 1,// 第几多少页
    totalPage: 0, // 一共多少页
    setinter: 0
	})
  let myChart1: echarts.ECharts | null = null
	onMounted(async() => {
      await initexs()
      screenAdapter()
      window.addEventListener('resize',screenAdapter )
	})
  onUnmounted(() => {
    clearInterval(state.setinter)
    socketService.Instance.unRegisterCallBack('seller')
    window.removeEventListener('resize', screenAdapter)
  })
  // 初始化exs
  const initexs = async() => {
    const chartDom = document.getElementById('sellerRef');
    myChart1 = echarts.init(chartDom as HTMLElement, store.state.theme)
    const initoption = {
      title: {
        text: '▎商家销售统计',
        left: 20,
        top: 20
      },
			tooltip: {
				show: true,
				trigger: 'axis',
				axisPointer: {
					type: 'line',
					z: 0,
					lineStyle: {
						width: 66,
						color: '#2d3443',
						type: 'solid'
					}
				}
			},
      grid: {
        top: '20%',
        left: '3%',
        right: '6%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
      },
      series: [{
        type: 'bar',
        label: {
          show: true,
          position: 'right',
          textStyle: {
            color: '#fff'
          }
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#5052ee' },
          { offset: 1, color: '#ab6ee5' }
        ])
        }
      }]
    }
    initoption && (myChart1 as  echarts.ECharts).setOption(initoption);
    socketService.Instance.registerCallBack('seller', getData)
    try {
      await getseller()
    } catch (error) {
      console.log(error);
    }
  }
    // 获取数据
  const getData = (data:API.sellerlistRes[]) => {
    data.sort( (a,b):number => {
      return a.value - b.value
    }) // 排序
    // state.totalPage = data.length % 5 === 0 ? data.length / 5 : data.length / 5 + 1
    state.totalPage = Math.ceil(data.length/5)
    state.data = data
    setIn()
  }
    // 更新图表
  const updataChar = () => {
    const showdata = state.data.slice((state.currentPage - 1) * 5, (state.currentPage - 1) * 5 + 5)
    const name = showdata.map((element:API.sellerlistRes) => {
      return element.name
    })    
    const value = showdata.map((element:API.sellerlistRes) => {
      return element.value
    })
    const dataoption = {
      yAxis: {
        data: name
      },
      series: [{
        data: value
      }]
    }
    dataoption && (myChart1 as  echarts.ECharts).setOption(dataoption);
  }
  const mousover = () => {
    clearInterval(state.setinter)
  }
  const mousout = () => {
    setIn()
  }
  const setIn = () => {
    if (state.setinter) {
      clearInterval(state.setinter)
    }
    state.setinter = setInterval(() => {
      state.currentPage === state.totalPage ? state.currentPage = 1 : state.currentPage ++
      updataChar()
    }, 3000)
  }
  const screenAdapter = () => {
    const titleFontSize = sellerRef.value.offsetWidth / 100 * 3.6;
    // console.log(titleFontSize);
    const Adapteroption = {
      title: {
        textStyle: {
          fontSize: titleFontSize
        }
      },
			tooltip: {
				axisPointer: {
					lineStyle: {
						width: titleFontSize
					}
				}
			},
      series: [{
        barWidth: titleFontSize,
        itemStyle: {
          borderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
        }
      }]
    }
    Adapteroption && (myChart1 as  echarts.ECharts).setOption(Adapteroption);
    (myChart1 as  echarts.ECharts).resize()
  }
  defineExpose({
    screenAdapter
  })
  watch ( () => store.state.theme, async() => {
    // console.log('qweqwe');
    (myChart1 as echarts.ECharts).dispose();
    await initexs()
    screenAdapter()
    updataChar()
  }, {
    // immediate: true, // 是否初始化立即执行一次, 默认是false
    deep: true // 是否是深度监视, 默认是false
  })
</script>
<style lang='less' scoped>
</style>